<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>collapse</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>
	<body>
		
		<div class="container">
			<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">点击查看</a>
			<div class="collapse" id="collapseExample">
				<!--添加well 样式-->
				<div class="well">
					hello world
				</div>
			</div>
			<!--手风琴效果
				panel :面板
			-->
			<div class="panel-group" id="accordion" role="tablist">
				<div class="panel panel-default">
					<!--
					 三个部分 :头部 身体 和脚步
					-->
					<div class="panel-heading" role="tab" id="headingOne">
						<h4 class="panel-title">
							<!--它的显示要依赖与其父级控件的 通过# id 进行锁定-->
							<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>
						</h4>
					</div>
					<!--
						in 为直接展开
					-->
					<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
						<div class="panel-body">
							欢迎来到淘学网
							欢迎来到淘学网
							欢迎来到淘学网
							欢迎来到淘学网
						</div>
					</div>
					<!--
						<div class="panel-body"></div>
					<div class="panel-footer"></div>
					-->
					<div class="panel-heading" role="tab" id="headingOne">
						<h4 class="panel-title">
							<!--它的显示要依赖与其父级控件的 通过# id 进行锁定-->
							<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a>
						</h4>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
						<div class="panel-body">
							欢迎来到淘学网
							欢迎来到淘学网
							欢迎来到淘学网
							欢迎来到淘学网
						</div>
					</div>
					<div class="panel-heading" role="tab" id="headingOne">
						<h4 class="panel-title">
							<!--它的显示要依赖与其父级控件的 通过# id 进行锁定-->
							<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a>
						</h4>
					</div>
					<div id="collapseThree" class="panel-collapse collapse " role="tabpanel">
						<div class="panel-body">
							欢迎来到淘学网
							欢迎来到淘学网
							欢迎来到淘学网
							欢迎来到淘学网
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript">
		   /*
		    * 支持的四种事件:
		    show.bs.collapse 显示前
			shown.bs.collapse 显示之后 
			hide.bs.collapse  隐藏前
			hidden.bs.collapse  隐藏后
		    * */
			$('#accordion').on('hidden.bs.collapse', function () {
                 alert("你好,世界!");
			})
		</script>
	</body>
</html>
